<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码雨</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100%;
            width: 100%;
        }

        canvas {
            width: 100%;
            height: 100%;
            background: #000;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <script>
        //获取canvas对象
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');

        //获取浏览器宽高
        var winWidth = window.innerWidth;
        var winHight = window.innerHeight;

        var FontSize = 16;
        var FontNum = winWidth / FontSize | 0;
        canvas.width = winWidth;
        canvas.height = winHight;

        var arrIndex = [];
        for (var i = 0; i < FontNum; i++) {
            arrIndex[i] = 1;
        }
        //自调用函数
        !function draw() {
            ctx.fillStyle = 'Rgba(0,0,0,0.05)';
            ctx.fillRect(0, 0, winWidth, winHight);
            for (var i = 0; i < FontNum; i++) {
                //一般的概率为大写,一般的概率为小写
                var str = (Math.random() * 36 | 0).toString(36)[Math.random() > 0.5 ? 'toLocaleLowerCase' : 'toLocaleUpperCase']();
                ctx.font = `${FontSize}px 黑体 bold`;
                ctx.fillStyle = '#0C3';
                ctx.fillText(str, FontSize * i, FontSize * arrIndex[i]);
                arrIndex[i]++;
                if (arrIndex[i] * FontSize > winHight * 1.2 && Math.random() > 0.95) {
                    arrIndex[i] = 0;
                }
            }
            setTimeout(draw, 60);
        }()

    </script>
</body>

</html>